<template>
  <div class="form_bar">
    <el-form ref="formRef" :model="form" :inline="true" class="all_content">
      <el-row class="el_filter_row" :gutter="20"
        ><el-col :span="8"
          ><!-- 欢迎语 -->
          <el-form-item label="欢迎语"> <el-input v-model="form.content" placeholder="搜索欢迎语" clearable></el-input> </el-form-item></el-col
        ><el-col :span="8">
          <!-- 群主/创建人 -->
          <el-form-item label="创建人">
            <el-select v-model="form.created_uids" placeholder="全部" multiple @click="openDepart" @change="changeDepart">
              <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item></el-col
        ><el-col :span="8"
          ><!-- 发送日期 -->
          <el-form-item label="创建时间" class="selectTime">
            <div class="picker_time">
              <el-date-picker popper-class="create_time" v-model="form.createTime" value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" @change="changeDate" />
            </div> </el-form-item></el-col
        ><el-col :span="24"
          ><el-form-item>
            <el-button type="primary" @click="submitForm()">查询</el-button>
            <el-button @click="resetForm()">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold"  @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </el-form-item></el-col
        ></el-row
      >
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" />
  </div>
</template>

<script setup lang="ts">
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import { ref, reactive, computed, watch } from 'vue'
  import type { ElForm } from 'element-plus'
  import bus from '@/utils/bus'

  type FormInstance = InstanceType<typeof ElForm>
  import { DFormat, getSetionId, AFold } from '@/utils/utils'
  import ZWDepart from '@/components/ZWDepart.vue'

  const searchSelectRef = ref<null | HTMLElement>(null)
  const DepartRef = ref<null | HTMLElement>(null)

  const emit = defineEmits(['submit','getTableH'])

  import { useStore } from '@/store'
  const store = useStore()

  const formRef = ref<FormInstance>()
  // 创建人options
  const creators = ref([])
  const form = reactive({
    content: '',
    created_uids: [],
    end_time: '',
    start_time: '',
    created_at: '',
    createTime: []
  })
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
  //打开新建选择人
  const openDepart = () => {
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = creators.value
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    form.created_uids = getSetionId('id', creators.value)
    DepartRef.value.departVisble = false
  }
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    form.created_uids = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }

  // 提交查询
  const submitForm = () => {
    if (form.createTime == null) {
      form.created_at = ''
      form.end_time = ''
      form.start_time = ''
    } else if (form.createTime.length) {
      form.end_time = form.createTime[1]
      form.start_time = form.createTime[0]
      form.created_at = form.createTime.join('~')
    } else {
      form.created_at = ''
      form.end_time = ''
      form.start_time = ''
    }
    let { createTime, ...data } = form
    emit('submit', data)
  }
  //重置
  const resetForm = () => {
    form.content = ''
    form.created_uids = []
    form.createTime = []
    creators.value = []
    DepartRef.value.removeItem(form.created_uids)
    submitForm()
  }
</script>

<style lang="scss" scoped>
  .form_bar {
    background: #f9f9f9;
    padding: 16px 12px;
    .el-row {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      box-sizing: border-box;
      margin: -8px -10px;
      .el-col {
        margin: 8px 0;
        &:last-of-type {
          flex: auto;
          text-align: right;
        }
        .el-form-item {
          margin-bottom: 0;
          width: 100%;
          .el-form-item__label-wrap {
            .el-form-item__label {
              font-size: 14px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
          }

          .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
